import { onBeforeUnmount, onMounted, ref ,onUnmounted} from "vue"
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'

//传入apiFn函数
export function useLazyData(apiFn:()=>void){
    //数据懒加载hook
    //定义一个ref绑定页面元素
  const target =ref(null)

  //@vueuse/core包提供的方法，target当前元素，一个函数，函数第一个参数是个数组，
  // 数组中解构一个对象，对象在结构isIntersecting，isIntersecting是个布尔值
  //isIntersecting是个布尔值，进入可视区域，为true
  //stop方法 不在监视是否进入可视区域。不调用消耗性能
    const {stop} =useIntersectionObserver(target,([{isIntersecting}])=>{

        if(isIntersecting){
          //当结构进入可视区，发送请求
          apiFn()
          stop()
        }
      },
      {
        // threshold 容器和可视区交叉的占比（进入的面积/容器完整面试） 取值，0-1 之间，默认比0大，所以需要滚动较多才能触发进入可视区域事件。
        threshold: 0
      }
      )
      //target  返回出去，绑定元素
      return  target
}

export function onScrollFn(){
    //手写吸顶
const y = ref(0)  //存页面滚动距离

const onScroll=()=>{
   const scrollTop=
    document.documentElement.scrollTop || document.body.scrollTop
    y.value=scrollTop
}

onMounted(()=>{  //绑定事件
    window.addEventListener('scroll',onScroll)
})
onBeforeUnmount(()=>{  //解绑
    window.removeEventListener('scroll',onScroll)
})
return y
}

//倒计时hook
export function useCountDown(count:number){
  const time=ref(0)
  const{ pause , resume}=useIntervalFn(
   ()=>{
    time.value--
    if (time.value === 0) {
      pause()
   } 
  }, 1000, {
    immediate:false  //进入页面就启动
  }
)
const start = () => {
  time.value = count
  resume()
}
return{
  time,
  start
}
}